<template>
  <el-menu
    id="wrapper"
    router
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    :background-color="themeColor"
    text-color="#fff"
    active-text-color="#ffd04b"
    ref="menu"
    :collapse="isCollapse"
  >
    <h3 v-show="!isCollapse" style="text-align: center; color: #e5e6e9">
      <img
        src="../assets/images/logo0.png"
        style="margin-top: 23px; margin-bottom: 25px"
        alt="logo"
      />
      <!-- <p>泛 鹏 天 地</p> -->
      <!-- <p>VANTAGE POINT</p> -->
    </h3>
    <h3 v-show="isCollapse" style="text-align: center">
      <img
        src="../assets/images/logo.png"
        style="width: 32px; height: 18px; margin: 19px 0 26px 0"
        alt="logo"
      />
    </h3>

    <div
      @click="collapseMenu"
      class="collapser"
      :style="isCollapse ? 'width:64px' : 'width:197px'"
    >
      <i
        :class="isCollapse ? 'iconfont icon-zhankai' : 'iconfont icon-shousuo'"
        id="tourstep1"
      ></i>
    </div>
    <!-- 无children -->
    <el-menu-item
      :index="item.path"
      v-for="item in noChildren"
      :key="item.path"
      @click="clickMenu(item)"
      :title="item.label "
    >
      <i :class="item.icon || 'iconfont icon-zhankai1'"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <!-- 有children -->
    <el-submenu
      :index="index + '' + itemA.label"
      v-for="(itemA, index) in hasChildren"
      :key="itemA.label + '' + index"
    >
      <template slot="title">
        <i :class="itemA.icon || 'iconfont icon-zhankai1'"></i>
        <span slot="title">{{ itemA.label }}</span>
      </template>
      <el-menu-item-group>
        <!-- <el-menu-item
          :index="subItem.path"
          v-for="(subItem, subIndex) in itemA.children"
          :key="subItem.label+''+subIndex"
          @click="clickMenu(subItem)"
        >
          <i :class="`${subItem.icon}`"></i>
          <span slot="title">{{ subItem.label }}</span>
        </el-menu-item> -->
        <!-- 使用封装的菜单递归组件 -->
        <ForMenu :menu="itemA.children"></ForMenu>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      asideMenu: [
        //   {
        //     path: "/",
        //     name: "home",
        //     label: "首页",
        //     icon: "s-home"
        //   },
        //   {
        //     path: "/video",
        //     name: "video",
        //     label: "视频管理",
        //     icon: "video-play"
        //   },
        //   {
        //     path: "/user",
        //     name: "user",
        //     label: "用户管理",
        //     icon: "user"
        //   },
        //   {
        //     // 二级菜单中一级菜单无需跳转，故可省略path
        //     label: "其他管理",
        //     icon: "user",
        //     children: [
        //       {
        //         path: "/page1",
        //         name: "page1",
        //         label: "页面1",
        //         icon: "setting"
        //       },
        //       {
        //         path: "/page2",
        //         name: "page2",
        //         label: "页面2",
        //         icon: "setting"
        //       }
        //     ]
        //   }
      ],
      // myScroll:{}
    };
  },
  mounted() {
    // console.log(Iscroll)
  },
  computed: {
    themeColor() {
      return this.$store.state.tab.themeColor;
    },
    noChildren() {
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      return this.menu.filter((item) => item.children);
    },
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
    menu() {
      return this.$store.state.tab.menu;
    },
  },
  methods: {
    collapseMenu() {
      this.$store.commit("collapseMenu");
    },
    clickMenu(item) {
      // 设置路由跳转
      // this.$router.push({ name: item.name })
      this.$store.commit("selectMenu", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
}
// 下拉小三角，改为右侧
.el-submenu /deep/.el-icon-arrow-down:before {
  content: "\e6e0";
}
// 展开小三角，改为下側
.el-submenu.is-opened /deep/.el-icon-arrow-down:before {
  content: "\e6e1";
}
.collapser {
  color: #8d97b0 !important;
  width: 197px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 20px;
  border-top: 1px solid #303349;
  cursor: pointer;
}
.collapser:hover {
  background: linear-gradient(180deg, #415478 0%, #415073 100%);
}
/deep/.el-submenu__title,
/deep/.el-menu-item {
  height: 42px;
  font-size: 14px !important;
  color: #8d97b0 !important;
  font-weight: 500;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 42px;
  -webkit-background-clip: text;
  vertical-align: middle;
  border-top: 1px solid #303349;
  i {
    color: #8d97b0 !important;
    margin-right: 10px;
    font-size: 14px;
  }
}
/deep/ .el-submenu__title {
  color: #d1d8ec !important;
  box-shadow: 0px -1px 0px 0px #27334e;
}
/deep/ .el-menu-item {
  box-shadow: 0px -1px 0px 0px #303349;
}
/deep/.el-submenu > .el-submenu__title {
  border-right: 4px solid transparent;
}
// 点击可展开sub的激活后样式
/deep/.el-submenu.is-active > .el-submenu__title {
  border-right: 4px solid #d15230;
  border-image: linear-gradient(#ea8a5e, #d15230) 0 100;
  background: linear-gradient(180deg, #415478 0%, #415073 100%);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 196px;
  min-height: 400px;
}
/deep/.el-menu-item-group__title {
  display: none;
}

/deep/.el-menu-item:hover {
  outline: 0 !important;
  background: linear-gradient(180deg, #415478 0%, #415073 100%);
}
/deep/.el-submenu__title:focus,
/deep/.el-submenu__title:hover {
  outline: 0 !important;
  background: linear-gradient(180deg, #415478 0%, #415073 100%) !important;
}
// item激活背景
.el-menu-item.is-active {
  background: linear-gradient(180deg, #415478 0%, #415073 100%);
  border-right: 4px solid #d15230;
  border-image: linear-gradient(#ea8a5e, #d15230) 0 100;
}
</style>
